<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="site/common::header('百科解答列表')" />
</head>
<body>
    <!-- 头部 -->
    <th:block th:include="site/common::navigation" />
    <!-- 面包屑 -->
    <div class="breadcroumb-area ">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcroumb-title text-center">
                        <h1>百科解答</h1>
                        <h5>
                            <a href="/">首页</a>/百科解答
                        </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="container">
        <div class="main-search-box pt-3 d-block mx-auto mb-3">
            <form class="search-form w-100">
                <input type="text"  placeholder="输入关键词" name="name" class="form-control search-input" id="name">
                <button type="button" class="btn search-btn" value="Search" style="margin-top: 0px;" onclick="loadEncyclopediasName()">
                    <i  class="fa fa-search"></i>
                </button>
            </form>
        </div>
        <div class="row mb-3 grid-list" id="encyclopedia-list">
            <div class="col-lg-4 col-md-6 col-sm-12 col-12 mb-3 grid-area" v-for="encyclopedia in encyclopedias">
                <div class="encyclopedia-area wow fadeInUp" data-wow-delay=".5s">
                    <div class="encyclopedia-title">
                        <a v-bind:href="'/encyclopedia/' + encyclopedia.id" target="_blank">{{encyclopedia.name}}</a>
                    </div>
                    <div class="encyclopedia-desc">
                        {{encyclopedia.description}}
                    </div>
                    <a class="details" v-bind:href="'/encyclopedia/' + encyclopedia.id" target="_blank">查看详情</a>
                </div>
            </div>
        </div>
        <div class="col-12 mt-5 mb-5 more">
            <a href="javascript:;">查看更多</a>
        </div>
    </div>
    <!-- 底部 -->
    <th:block th:include="site/common::footer" />
</body>
<th:block th:include="site/common::js" />
<script>
    var page = 1;

    var vm = new Vue({
        el: "#encyclopedia-list",
        data: {
            encyclopedias: []
        },
        mounted: function () {
            loadEncyclopedias(false);
        }

    });

    $(".more").click(function () {
        page += 1;
        loadEncyclopedias(false);
    });

    function loadEncyclopedias(empty) {
        var url = "/api/encyclopedia/" + page;
        $.get(url, function(result){
            if(empty) {
                vm.encyclopedias = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.encyclopedias.push(result.rows[i]);
                }
            }
        });
    }



    function loadEncyclopediasName() {
        var name = $("#name").val();
        var url = "/api/encyclopedia/" + name + "/1";
        $.get(url, function(result){
            vm.encyclopedias = [];
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.encyclopedias.push(result.rows[i]);
                }
            }
        });
    }

</script>
</html>